<template>
  <div class="home-bg">
    <div class="h-header">
      <div class="r-container">
        <Menu mode="horizontal" class="m-dark-menu" theme="dark" :active-name="3"
              style="background: #00152905;" @on-select="onSelect">
          <MenuItem name="2" style="padding: 0;">
            <Icon title="后台管理" class="user-img img" @click="gotoSystem"/>
          </MenuItem>
          <Submenu :name="3">
            <template slot="title">
              <div class="div-inline">
                <img class="user-img" src="../../assets/mainImages/user.png"/>
              </div>
              <div class="div-inline">
                <p>&nbsp; {{loginer}}</p>
              </div>
            </template>
            <MenuItem name="goLight" class="select">个人信息</MenuItem>
            <MenuItem name="logout" class="select">退出登录</MenuItem>
          </Submenu>
        </Menu>
      </div>
    </div>
    <div class="h-section">
      <div class="c-container">
        <ul class="box-l">
          <li v-for="(item, index) in cardNames" :key="index" @click="jump(item.id)">
            <div>
              <span></span>
              <p>{{item.name}}</p>
            </div>
          </li>
        </ul>
        <div class="box-r">
          <div @click="jump(7)">
            <span></span>
            <p>EMS</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'

  export default {
    name: 'DisplayCardMenu',
    mounted () {
      this.loginer = this.$store.state.user.user
    },
    data () {
      return {
        loginer: '',
        // 系统路由选择 的 数组
        cardNames: [
          {
            name: '空压系统',
            id: 1
          },
          {
            name: '制冷系统',
            id: 2
          },
          {
            name: '供水系统',
            id: 3
          },
          {
            name: '供电系统',
            id: 4
          },
          {
            name: '燃气系统',
            id: 5
          },
          {
            name: '蒸汽系统',
            id: 6
          }
        ]
      }
    },
    methods: {
      ...mapActions('user', [
        'getFacility',
        'getFacilitys'
      ]),
      ...mapActions('newEms', [
        // 'navAction',
        'spaceAction'
      ]),
      getStation (params, url) {
        window.myapi.getStation(params).then(res => {
          if (res.data.status === 200) {
            // this.facilitys = res.data.data
            if (res.data.data.length > 0) {
              this.getFacilitys(res.data.data)
              this.getFacility(res.data.data[0].value)
              console.log('ddddd', res.data)
              // 请求完才能跳转路由
              this.loadYourFunsMenus(url)
            } else {
              this.$Notice.warning({
                title: '提示',
                desc: '系统里的站房无数据，请补充数据....'
              })
            }
          } else {
            let msg = res.data.msg ? res.data.msg : '请求数据失败!'
            this.$Message.error({content: msg, duration: 5, closable: true})
          }
        }).catch(function (e) {
          if (e && e.response && e.response.data) {
            let msg = e.response.data.message ? e.response.data.message : '请求数据失败!'
            this.$Message.error({content: msg, duration: 5, closable: true})
          }
        })
      },
      jump: function (index) {
        switch (index) {
          case 1:
            // 显示项目
            this.$Notice.info({
              title: '提示',
              desc: '功能未启用....'
            })
            // this.getStation({spaceId: 190, type: 50}, '/air')
            break
          case 2:
            // this.$Notice.info({
            //   title: '提示',
            //   desc: '功能完善中....'
            // })
            // this.$router.push({path: '/cooling'})
            this.getStation({spaceId: 2, type: 51}, '/cooling')
            break
          case 3:
            this.$Notice.info({
              title: '提示',
              desc: '功能未启用....'
            })
            // this.$router.push({path: '/water'})
            break
          case 4:
            this.$Notice.info({
              title: '提示',
              desc: '功能未启用....'
            })
            // this.loadYourFunsMenus('/tech')
            // this.$router.push({path: '/electricity'})
            break
          case 5:
            this.$Notice.info({
              title: '提示',
              desc: '功能未启用....'
            })
            // this.loadYourFunsMenus('/tech')
            break
          case 6:
            this.$Notice.info({
              title: '提示',
              desc: '功能未启用....'
            })
            // this.loadYourFunsMenus('/tech')
            break
          case 7:
            this.$Notice.info({
              title: '提示',
              desc: '功能未启用....'
            })
            // this.loadYourFunsMenus('/energy')
            break
          default:
            break
        }
      },
      onSelect (selectItem) {
        if (selectItem === 'logout') {
          this.$store.commit('user/updateState', {user: ''})
          this.$router.push({
            name: 'login'
          })
        }
        if (selectItem === 'goLight') {
          this.$router.push({path: '/userinfo'})
        }
      },
      logout: function () {
        sessionStorage.menuLocal = ''
        this.$router.push({path: '/login'})
      },
      loadYourFunsMenus (param, id) {
        window.myapi.do_post('/$menu/auth_menus_fun', {'url': param}).then(resp => {
          if (resp.status === 200) {
            // resp.data.data.size 有可能等于0
            if (resp.data.data.length > 0) {
              this.$store.commit('user/addMenus', resp.data.data[0].children)
              this.$store.commit('user/addTopMenuUrl', resp.data.data[0].url)
            }
            /* if (param === '/energy') {
              this.spaceAction({type: '模板'})
              // this.navAction('energyOverview')
              // this.$router.push({path: '/console'})
              // this.$router.push({name: 'console'})
              return
            } */
            if (param === '/system') {
              this.$router.push({path: '/system/iot/deviceType'})
            } else {
              this.$router.push({path: param})
            }
            // this.$router.push({path: param + `/${id}`})
          }
          // eslint-disable-next-line handle-callback-err
        }).catch(error => {
        }).finally(() => {
        })
      },
      // 跳转到后台管理
      gotoSystem () {
        // alert(44)
        this.loadYourFunsMenus('/system')
      }
    }
  }
</script>

<style lang='scss'>
  .home-bg {
    height: 100%;
    width: 100%;
    min-width: 1900px;
    min-height: 969px;
    overflow: hidden;
    background: #142156 url('../../assets/mainImages/bgg.jpg') repeat top;
    background-size: 100% 100%;

    .h-header {
      height: $header-h;

      .r-container {
        float: right;
        padding: 10px 100px 0 0;
        .ivu-menu-dark {
          background-color: rgba(0, 21, 41, 0.02);
        }
        .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item {
          color: $font-f;
        }
        .img {
          background: url('../../assets/mainImages/set.png') no-repeat center center;
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
        }

        .select {
          color: #dbd9d9;
        }

        .div-inline {
          display: inline-block;
          vertical-align: top;
        }

        .user-img {
          width: 33px;
          height: 33px;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }

    .h-section {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .c-container {
        width: 910px;
        /*height: 424px;*/
        padding-bottom: 150px;
        display: flex;

        .box-r {
          flex: 0 0 194px;
          height: 424px;
          margin: 18px 0 0 18px;

          div {
            height: 100%;

            span {
              display: inline-block;
              width: 94px;
              height: 108px;
              background: url($image + 'ems.png') no-repeat center center;
            }

            p {
              color: $font-f;
              font-size: $font-24;
            }

            @include border;
            @include border-radius;
            background-color: $bg-home;
            @include flex;
          }

          &:hover {
            cursor: pointer;
            background-color: rgba(33, 64, 128, .8);
            box-shadow: 0px 0px 20px 2px #050188;
          }
        }

        .box-l {
          flex: 1;

          li {
            display: inline-block;
            margin: 18px;

            div {
              width: 194px;
              height: 194px;
              @include border;
              @include border-radius;
              background-color: $bg-home;
              @include flex;

              span {
                display: inline-block;
                width: 94px;
                height: 94px;
              }

              p {
                color: $font-f;
                font-size: $font-24;
              }
            }

            &:hover {
              cursor: pointer;
              background-color: rgba(33, 64, 128, .8);
              box-shadow: 0px 0px 20px 2px #050188;
            }
          }

          li:nth-child(1) {
            span {
              background: url($image + 'air.png') no-repeat center center;
            }
          }

          li:nth-child(2) {
            span {
              background: url($image + 'refrigeration.png') no-repeat center center;
            }
          }

          li:nth-child(3) {
            span {
              background: url($image + 'water.png') no-repeat center center;
            }
          }

          li:nth-child(4) {
            span {
              background: url($image + 'supply.png') no-repeat center center;
            }
          }

          li:nth-child(5) {
            span {
              background: url($image + 'gas.png') no-repeat center center;
            }
          }

          li:nth-child(6) {
            span {
              background: url($image + 'steam.png') no-repeat center center;
            }
          }
        }
      }
    }
  }
</style>
